<template>
  <div>
    <van-cell class="aa" value="名品特卖" />

    <van-search
      v-model="value"
      shape="round"
      input-align="center"
      placeholder="搜素商品 分类 功效"
      @search="onSearch"
    >
    </van-search>

    <van-sticky>
      <van-tabs>
        <van-tab v-for="(item, index) in list" :key="index" :title="item.title">
        </van-tab>
      </van-tabs>
    </van-sticky>

    <van-tabbar v-model="active" active-color="#ff4070">
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o">拼团</van-tabbar-item>
      <van-tabbar-item icon="bag-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
    </van-tabbar>

     <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

     <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>
   
    <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

     <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

     <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

     <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

     <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

     <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

      <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

      <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

      <div class="fot">
      <div class="fot1">
        <img src="./assets/6.png" alt="" />
      </div>
      <div class="fot2">
          <div class="fot21">
        <span class="sp7">浪莎夏季新品上新</span><br>
        <!-- <span class="sp8">acme de la vie</span><br /> -->
        <span class="sp9">仅剩02天23时</span>
        </div>
        <div class="fot22">
            <img src="./assets/7.png" alt="">
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer>
      <div class="footerone">
        <img
          src="http://s1.jmstatic.com/templates/touch/css/v3/image/footer_bg.jpg"
        />
      </div>

      <ul class="footertwo">
        <li class="lione">触屏版</li>
        <li class="litwo">电脑版</li>
      </ul>

      <p class="pp">?2016 聚美优品 Jumei.com</p>
    </footer>
    

  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      active: 0,
      list: [
        {
          id: 1,
          title: "首页",
        },
        {
          id: 2,
          title: "极速免税",
        },
        {
          id: 3,
          title: "母婴",
        },
        {
          id: 4,
          title: "轻奢",
        },
        {
          id: 5,
          title: "名品特卖",
        },
      ],
    };
  },
  methods: {
    onSearch() {},
  },
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}
.aa {
  text-align-last: center;
}
.van-tab :hover {
  color: #ff4070;
}

.fot {
  height: 233px;
  /* background-color: green; */
  /* border: 8px solid #c1c1c1; */

}
.fot1 {
  width: 100%;
  height: 170px;
  /* background-color: greenyellow; */
}
.fot1 > img {
  width: 100%;
  height: 100%;
}
.fot2 {
  
  height: 62px;
  /* background-color: hotpink; */
  padding-left: 20px;
  display: flex;
}
.fot21{
    height: 62px;
    width: 180px;
    /* background-color: #ff4070; */
    
}
.fot21 > .sp7 {
  /* margin-right: 120px; */
  font-size: 18px;
  font-weight: bold;
  line-height: 36px;
}
/* .fot2 > .sp8 {
  font-weight: bold;
} */
.fot21 > .sp9 {
  color: #c1c1c1;
}
.fot22{
    width: 81px;
    margin-left:100px ;
}
.fot22 > img {
    width: 100%;
    height: 100%;
}

/* 底部 */
footer {
  width: 375px;
  height: 243px;
  /* background-color: red; */
  overflow: hidden;
}

footer > .footerone {
  width: 351px;
  height: 70px;
  margin-top: 16px;
}
footer > .footerone > img {
  width: 100%;
  height: 100%;
}

footer > .footertwo > li {
  margin: 0 20px;
  margin-top: 20px;
  border: 1px solid gray;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
}
footer > .footertwo > .lione {
  float: left;
  margin-left: 80px;
  width: 80px;
  height: 30px;
}
footer > .footertwo > .litwo {
  margin-right: 80px;
  float: right;
  width: 80px;
  height: 30px;
}
footer > .footertwo > li:hover {
  color: pink;
}

footer > .pp {
  width: 351px;
  height: 20px;
  margin-top: 20px;
  padding-left: 80px;
  float: left;
  color: #ccc;
}
</style>